import { Component, OnInit, ViewChild, Input} from '@angular/core';
import { AppService } from '../../app.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { SlideshowsModel, SlideshowsCategoryModel } from '../../models/SlideshowsModel';
import {SlideshowsRenameComponent } from './slideshows-rename.component';
import { SlideshowsService } from '../../services/slideshows.service';
import { NgbTabset } from '@ng-bootstrap/ng-bootstrap';

import { FileUploader } from 'ng2-file-upload';
import {ConfigProvider} from '../../providers/config.provider';
import { SecurityProvider } from '../../providers/security.provider';
import {ConfirmConfig} from '../../shared/modal/modal-model';
import { ConfirmComponent } from '../../shared/modal/confirm.component';

@Component({
    selector: 'app-slideshows-list',
    template: `
    <div class="slideshows-container" >
        <div class="slideshows-item" *ngFor="let item of slideshowCategory.slideshows"
            [ngStyle]="{'background-image':'url('+ item.image +')'}">
            <span class="title">{{item.title}}</span>
            <img class="close" src="/assets/img/icons/delete.png" (click)="delete(item)" />
            <img class="edit" src="/assets/img/icons/edit.png" (click)="rename(item)"  />
        </div>
        <div class="slideshows-item add" style="background-image:url(/assets/img/icons/add.png)">
            <span class="title">添加</span>
            <div class="uploader">
                <input class="upload" type="file" ng2FileSelect [uploader]="uploader" />
            </div>
        </div>
    </div>
    `
})

export class SlideshowsListComponent {

    @Input() slideshowCategory: SlideshowsCategoryModel;
    public uploader: FileUploader;

    constructor(
        private slideshowsService: SlideshowsService,
        private appService: AppService,
        private modalService: NgbModal
    ) {
        const that = this;
        const url = ConfigProvider.apiBaseURL + 'api/file/upload';
        this.uploader = new FileUploader({ url: url});
        this.uploader.onSuccessItem = function (fileItem, response, status, headers) {
            try {
                const result = JSON.parse(response);
                that.add(result);
            } catch (e) {
                console.error(e);
            }
            that.uploader.clearQueue();
        };
        this.uploader.onAfterAddingFile = function (fileItem) {
            that.uploader.authTokenHeader = 'App-Token';
            that.uploader.authToken = SecurityProvider.Authentication;
            that.uploader.uploadAll();
        };
    }

    delete(item) {
        const that = this;
        const modalRef = this.modalService.open(ConfirmComponent);
        const msg = `您确定要删除幻灯片 <code><b>${item.title}</b></code> 吗？<br />此操作无法恢复，请谨慎操作!`;
        modalRef.componentInstance.config = new ConfirmConfig(msg);

        modalRef.result.then((result) => {
            if (result.status === 'approved') {
                this.slideshowsService.removeSlideshow(
                    this.slideshowCategory.id,
                    item.id,
                    function () {
                        that.appService.slideshowsRefreshEventEmitter.emit('Refresh');
                    }
                );
            }
        }, (reason) => {

        });
    }

    rename(item) {
        const that = this;
        const modalRef = this.modalService.open(SlideshowsRenameComponent);
        modalRef.componentInstance.modalTitle = '重命名幻灯片';
        modalRef.componentInstance.modalText = item.title;
        modalRef.result.then((title) => {
            that.slideshowsService.updateSlideshow(
                that.slideshowCategory.id,
                item.id,
                title,
                function() {
                    that.appService.slideshowsRefreshEventEmitter.emit('Refresh');
                }
            );
        }, (reason) => {
            console.log(reason);
        });
    }

    add(item) {
        const that = this;
        if (item && item.result && item.result) {
            this.slideshowsService.addSlideshow(
                this.slideshowCategory.id,
                item.result,
                function () {
                    that.appService.slideshowsRefreshEventEmitter.emit('Refresh');
                }
            );
        }
    }
}
